import React from "react";
import { Dropdown, Menu, Button } from "antd";
import { CSSPrefix } from "../../../../../helps/utils";
import { actionGorup, statusdisabledList } from "../../../helper/const";
import { updatedisabledStatus } from "../../../helper/formatted";

const ActionGroup = (props) => {
  const { contentStatus = "" } = props;
  const disabledActionList = statusdisabledList[contentStatus] || [];
  const resultActionGroup = updatedisabledStatus(
    actionGorup,
    disabledActionList
  );
  const { contentButton, contentMenu } = resultActionGroup;
  console.log("contentMenu", contentButton,contentMenu);
  const menu = (
    <Menu>
      {contentMenu.map((item) => (
        <Menu.Item
          disabled={item.disabled}
          style={{
            fontSize: 12,
            color: `${item.disabled ? "#ccc" : "#1677FF"}`,
          }}
          key={item.code}
        >
          {item.label}
        </Menu.Item>
      ))}
    </Menu>
  );
  return (
    <div style={{ display: "flex" }}>
      {contentButton.map((item) => (
        <Button disabled={item.disabled}  size="small" style={{ marginRight: 8, fontSize: 12 }}>
          {item.label}
        </Button>
      ))}
      <Dropdown
        overlayClassName={`${CSSPrefix}-content-menu`}
        overlay={menu}
        trigger={["click"]}
      >
        <Button size="small" style={{ marginRight: 8, fontSize: 12 }}>
          ...
        </Button>
      </Dropdown>
    </div>
  );
};

export default ActionGroup;
